<template>
  <!-- 添加的部分 -->
  <el-dialog v-model="avisible" @closed="requery" title="添加游戏发行商">
    <div>
      <el-form>
        <el-form-item>
          <el-input v-model="addInfo.publisher" placeholder="发行商名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="addInfo.intro" placeholder="发行商简介"></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="addInfo.created"
            value-format="YYYY-MM-DD"
            placeholder="发行商创建时间"
          ></el-date-picker>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <el-button @click="add" type="primary">添加</el-button>
      <el-button @click="avisible = false" type="danger">关闭</el-button>
    </template>
  </el-dialog>

  <!-- 修改的部分 -->
  <el-dialog v-model="mvisible" @closed="requery" title="修改游戏发行商">
    <div>
      <el-form-item>
        <el-input v-model="modifyInfo.publisher" placeholder="发行商名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="modifyInfo.intro" placeholder="发行商简介"></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="modifyInfo.created"
          value-format="YYYY-MM-DD"
          placeholder="发行商创建时间"
        ></el-date-picker>
      </el-form-item>
    </div>

    <template #footer>
      <el-button @click="modify" type="primary">保存</el-button>
      <el-button @click="mvisible = false" type="danger">关闭</el-button>
    </template>
  </el-dialog>

  <!-- 查询表单 -->
  <div v-if="'query' == props.mode">
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="publisher" placeholder="游戏发行商名称"></el-input>
      </el-form-item>

      <el-from-item>
        <el-button-group>
          <el-button @click="requery" type="primary">查询</el-button>
          <el-button @click="reset" type="danger">重置</el-button>
          <el-button @click="showAdd" type="success">添加</el-button>
        </el-button-group>
      </el-from-item>
    </el-form>
  </div>

  <!-- 数据呈现的部分 -->
  <div>
    <el-table :data="list">
      <el-table-column label="分类名称" prop="publisher"></el-table-column>
      <el-table-column label="分类简介" prop="intro"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            v-if="'query' == props.mode"
            @click="showModify(scope.row)"
            type="primary"
            size="small"
            >修改</el-button
          >
          <el-button
            v-if="'query' == props.mode"
            @click="showDelete(scope.row)"
            type="danger"
            size="small"
            >删除</el-button
          >
          <el-button
            v-if="'selector' == props.mode"
            @click="selectType(scope.row)"
            type="success"
            size="small"
            >选择</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 分页的部分 -->
  <div>
    <el-pagination
      v-model:current-page="page.pageNumber"
      v-model:page-size="page.pageSize"
      :total="page.total"
      :page-sizes="[2, 5, 10, 20]"
      @current-change="query"
      @size-change="query"
      layout="total,prev,pager,next,sizes"
    ></el-pagination>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { api } from '@/js/ajax'
import { tools } from '@/js/tools'
import { ElMessage, ElMessageBox } from 'element-plus'

const props = defineProps(['mode'])
const emits = defineEmits(['type-selected'])

onMounted(() => {
  query()
})

//#region 选择的部分
const selectType = (info) => {
  console.log('选中的分类', info)
  emits('type-selected', info)
}
//#endregion

//#region 删除的部分
const showDelete = (info) => {
  ElMessageBox.confirm(`确定要删除${info.publisher}吗？`, '删除确认', {
    type: 'warning',
  })
    .then(() => {
      api.delete(`/crud/gamepublisher/${info.gpid}`, {}, (data) => {
        ElMessage({
          message: data.message,
          type: data.success ? 'success' : 'error',
        })
        requery()
      })
    })
    .catch(() => {})
}

//#region 修改的部分
const mvisible = ref(false)
const modifyInfo = ref({})
const showModify = (info) => {
  modifyInfo.value = tools.mergeJson(info)
  mvisible.value = true
}

const modify = () => {
  api.put(`/crud/gamepublisher`, modifyInfo.value, (data) => {
    ElMessageBox.alert(data.message, '修改结果')
  })
}
//#endregion
const avisible = ref(false)

const addInfo = ref({
  publisher: '',
  intro: '',
  created: '',
})

const showAdd = () => {
  addInfo.value = {
    publisher: '',
    intro: '',
    created: '',
  }
  avisible.value = true
}

const add = () => {
  api.post(`/crud/gamepublisher`, addInfo.value, (data) => {
    ElMessageBox.alert(data.message, '添加结果')
    if (data.success) {
      addInfo.value = {
        publisher: '',
        intro: '',
        created: '',
      }
    }
  })
}
//#endregion

//#region 查询的部分
const page = ref({
  pageSize: 5,
  pageNumber: 1,
})

const publisher = ref('')
const list = ref([])

const reset = () => {
  publisher.value = ''
  requery()
}

const requery = () => {
  page.value.pageNumber = 1
  query()
}
const query = () => {
  api.get(
    `/crud/gamepublisher/${page.value.pageSize}/${page.value.pageNumber}`,
    { publisher: publisher.value },
    (data) => {
      if (data.success) {
        list.value = data.data.data
        page.value = data.data.pageBean
        return
      }
      ElMessageBox.alert(data.message, '查询错误')
    },
  )
}
//#endregion
</script>

<style scoped></style>
